<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>h5表单</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				width: 100%;
				font-size: 14px;
				overflow: hidden;
				font-family: "微软雅黑";
			}
			input{
				outline: none;
				display: inline-block;
			}
			.box{
				width: 200px;
				margin:20px auto;
				position: relative;
			}
			.box input, .box .tip{
				padding: 0 5px;
				width: 198px;
				height: 30px;
				line-height: 30px;
				border: 1px solid #ccc;

			}
			.box .tip{
				display: none;
				position: absolute;
				top: 0;
				left: 0;
				color:#bbb;
				cursor: text;
			}
			
			/* css验证input的email */
			#email2:valid{
				border:1px solid #0099FF;
			}
			#email2:invalid{
				border:1px solid #ff6600;
			}
		</style>
	</head>
	<body>
    获取地理位置API：navigator.geolocation.getCurrentPosition
		<script type="text/javascript" charset="UTF-8">
			~function(pro){
				function myTrim(){
					return this.replace(/^ +| +$/g,'');
				}
				pro.myTrim = myTrim;
			}(String.prototype);
		</script>
		<h2>单选按钮</h2>
		<!--
		<input type="radio" name="sex" id="sexMan" checked value="男"/><label for="sexMan">男</label>
		<input type="radio" name="sex" id="sexWoman" value="女"/><label for="sexWoman">女</label>
		<input type="submit" id="submit"> 
		<script type="text/javascript" charset="UTF-8">
			var submit = document.getElementById("submit"),
				sexMan = document.getElementById("sexMan"),
				sexWoman = document.getElementById("sexWoman");
			submit.onclick = function(){
				var flag = 0;
				!sexMan.checked ? flag = 1 : null;
				console.log(flag);
			}
			//onchange事件一般给表单用，就是点击的还是原来的就不会输出，而click是只要点击了就会输出
			sexMan.onchange = sexWoman.onchange = function(){
				console.log(this.value);
			}
		</script>-->
		
		<h2>复选</h2>
		<!--<input type="checkbox" name="daxia" id="changge" value="唱歌" /><label for="changge">唱歌</label>
		<input type="checkbox" name="daxia" id="tiaowu" value="跳舞" /><label for="tiaowu">跳舞</label>
		<input type="checkbox" name="daxia" id="dushu" value="读书" /><label for="dushu">读书</label>
		<input type="submit" id="submit">
		<script type="text/javascript" charset="UTF-8">
			var submit = document.getElementById("submit"),
				daxia = document.getElementsByName("daxia");
			submit.onclick = function(){
				for(var i=0; i<daxia.length; i++){
				var curdaxia = daxia[i];
				if(curdaxia.checked){
					console.log(curdaxia.value);
				}
			}
			}
			
		</script>-->
		
		<h2>h5新</h2>
		<!--<input type="number" min="18" max="65" step="2.5" value="35" />
		
		<input type="number" id="number" style="width: 30px; text-align: center;" value="25" disabled />
		<input type="range" id="range" min="18" max="65" step="1" value="25" />
		<script type="text/javascript" charset="UTF-8">
			var number = document.getElementById("number"),
				range = document.getElementById("range");
			range.oninput = function(){//移动端input事件
				number.value = range.value;
			}
		</script>-->
		<input type="date" /><br /><br />
		
		<h2>一级下拉</h2>
		<select>
			<option>ABC</option>
			<option>DEF</option>
			<option>GHI</option>
			<option>JKL</option>
		</select><br /><br />
		
		<h2>二级下拉</h2>
		<input type="search" list="searchList" />
		<datalist id="searchList">
			<option>ABC</option>
			<option>DEF</option>
			<option>GHI</option>
			<option>JKL</option>
		</datalist><br /><br />
		
		
		<input type="text" id="email1" value="" /><br /><br />
		<input type="email" id="email2" /><br /><br />
		<input type="email" id="email3" placeholder="请输入您常用的邮箱！"/>
		
		
		
		<div class="box">
			<input type="email" id="email4" placeholder="请输入您常用的邮箱！"/>
			<span class="tip" id="tipEmail">请输入您常用的邮箱！</span>
		</div>
		
		<span style="font-size: 15px;" id="shej">设计未来</span>
		<script type="text/javascript" charset="UTF-8">
		var shej = document.getElementById("shej");
		shej.onclick = function(){
			window.location.href = 'https://www.baidu.com';
		}
		
			var email1 = document.getElementById("email1"),
				email2 = document.getElementById("email2");
			email1.onblur = function(){
				var val = this.value.myTrim();
				var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
				if(!reg.test(val)){
					console.log("不正确")
				}
			}
			email2.onblur = function(){
				var val = this.value.myTrim();
				if(!this.checkValidity()){//h5提供的邮箱验证方法
					console.log("不正确")
				}
			}
			//email2的边框验证用css3但是会有点小问题，输入sss@ss也算正确
			email1.onkeyup = function(){
				var val = this.value.myTrim();
				var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
				if(!reg.test(val)){
					this.style.border = "1px solid #ff0000";
				}else{
					this.style.border = "1px solid #008000";
				}
			}
			
			//用原生js结合css样式来模拟placeholder效果
			if(navigator.userAgent.indexOf('MSIE') > -1){
				var email4 = document.getElementById("email4"),
	 				tipEmail = document.getElementById("tipEmail");
	 			email4.placeholder = '';
	 			tipEmail.style.display = 'block';
	 			tipEmail.onclick = function(){
	 				email4.focus();//focus()获取光标
	 				
	 			};
	 			email4.onkeydown = email4.onkeyup = email4.onfocus = function(){
	 				tipEmail.style.display = this.value.length === 0 ? 'block' : 'none';
	 				
	 			};
			}
 			
		</script>
	</body>
</html>


























